<!-- 首页 -->
<script lang='ts' setup>
import { ref } from 'vue'
import contentPanelVue from '../icons/contentPanel.vue';
import ChatFrame from '../icons/chatFrame.vue';
import { axiosRequests } from "../../hooks/axiosRequest"
import type { userContent } from "../../types/write"
import Discuss from "../discuss/discuss.vue"
const { userget } = axiosRequests()
const count = ref<Array<userContent>>([
    {
        content: '123', count: 1, createtime: '2212121', email: '1232321',
        showLabels: 'awawad',//标签类型
        filesurl: '1', flag: 1, introduce: '1233212313', publishType: '1', title: 'wwwwwww',
        writeType: 'asddd',
    },
    {
        content: '123', count: 1, createtime: '2212121', email: '1232321',
        showLabels: 'awawad',//标签类型
        filesurl: '1', flag: 1, introduce: '1233212313', publishType: '1', title: 'wwwwwww',
        writeType: 'asddd',
    },
    {
        content: '123', count: 1, createtime: '2212121', email: '1232321',
        showLabels: 'awawad',//标签类型
        filesurl: '1', flag: 1, introduce: '1233212313', publishType: '1', title: 'wwwwwww',
        writeType: 'asddd',
    },
    {
        content: '123', count: 1, createtime: '2212121', email: '1232321',
        showLabels: 'awawad',//标签类型
        filesurl: '1', flag: 1, introduce: '1233212313', publishType: '1', title: 'wwwwwww',
        writeType: 'asddd',
    },
    {
        content: '123', count: 1, createtime: '2212121', email: '1232321',
        showLabels: 'awawad',//标签类型
        filesurl: '1', flag: 1, introduce: '1233212313', publishType: '1', title: 'wwwwwww',
        writeType: 'asddd',
    },
    {
        content: '123', count: 1, createtime: '2212121', email: '1232321',
        showLabels: 'awawad',//标签类型
        filesurl: '1', flag: 1, introduce: '1233212313', publishType: '1', title: 'wwwwwww',
        writeType: 'asddd',
    },
])
//触底更新
window.onscroll = async function () {
    var windowH = document.documentElement.scrollHeight;//实际高度
    var documentH = document.documentElement.clientHeight;//元素在屏幕上所用的所有可见区域的高度
    var scrollH = document.documentElement.scrollTop; // 获取或设置一个元素的内容垂直滚动的像素数
    if (documentH + scrollH >= windowH - 100) {
        const result = await userget('/email/writeArticle/getuploadContent', {})
        if (result.status === 1) {
            return
        }
        result.data.forEach((e: userContent) => {
            count.value.push(e)
        });
    }
}
const child: any = ref(null)
function asd(index: number) {
    child.value![index].closeModal()
}
</script>
<template>
    <div id="indexMain">
        <ul>
            <li class="contentSpan" v-for="(list, index) in count">
                <contentPanelVue ref="child" style="min-width:725px ;" :writeDetails="list" :flagShow="true">
                    <template v-slot:cover>
                        <div class="cover" v-if="list.filesurl === '1' ? false : true">
                            <img :src="list.filesurl" alt="">
                        </div>
                    </template>
                    <template v-slot:discussBox>
                        <div class="discussbox">
                            <div class="btnbox" @click="asd(index)"></div>
                            <Discuss :beloneTo="list.count"></Discuss>
                        </div>
                    </template>
                </contentPanelVue>
            </li>
        </ul>
    </div>
    <div id="easyDiscuss">
    </div>
</template>
<style lang='scss' scoped>
$border: 50px;

//评论盒子
.discussbox {
    position: relative;
    margin-top: 20px;
    width: 100%;
    // height: 100px;
    border-radius: 10px;
    background-color: rgb(250, 250, 250);

    .btnbox {
        position: absolute;
        top: 0;
        right: 0;
        width: 0px;
        height: 0px;
        border: $border solid transparent;
        border-top: $border solid rgb(67, 218, 100);
        cursor: pointer;
    }


    .btnbox {
        -webkit-animation: swing-in-top-fwd 2s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
        animation: swing-in-top-fwd 2s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    }
}

.cover {
    flex: 1;
    height: 100%;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px rgb(241, 239, 239);

    img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
    }
}

#indexMain {
    position: absolute;
    top: 3.125rem;
    left: 50%;
    transform: translateX(-50%);

    .contentSpan {
        margin-top: 35px;
        width: 100%;
    }
}

#easyDiscuss {
    width: 200px;
    height: 200px;
    // background-color: red;
}
</style>
